import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:lpinyin/lpinyin.dart';
import 'package:flutter_syt/application.dart';
import 'package:flutter_syt/generated/l10n.dart';
import 'package:flutter_syt/theme/theme_color.dart';
import 'package:flutter_syt/utils/click_utils.dart';

class LoginAreaCodePage extends StatefulWidget {
  final Function(AreaCodeData) onClick;
  final List<AreaCodeData> data;
  LoginAreaCodePage({Key? key, required this.onClick, required this.data})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _LoginAreaCodePageState();
  }
}

class _LoginAreaCodePageState extends State<LoginAreaCodePage> {
  Widget titleWidget(String title) {
    return Container(
      height: 53,
      alignment: Alignment.centerLeft,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 15),
        child: Text(
          title,
          style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w600,
              fontFamily: 'PingFang SC',
              color: ThemeColor.colorBlack100),
          textAlign: TextAlign.left,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Container(
      constraints: BoxConstraints(maxHeight: screenSize.height - 130),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16), topRight: Radius.circular(16)),
      ),
      child: Column(
        children: [
          Container(
            height: 60,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(width: 15),
                Text(
                  S.of(context).Country_or_Region,
                  style: TextStyle(
                      fontSize: 16,
                      fontFamily: 'PingFang SC',
                      fontWeight: FontWeight.w600),
                ),
                Spacer(),
                IconButton(
                  icon: Icon(Icons.close),
                  onPressed:
                      ClickUtils.debounce(() => {Navigator.of(context).pop()}),
                ),
              ],
            ),
          ),
          Divider(
            thickness: 0.5,
            height: 1,
          ),
          Expanded(
              child: ListView.separated(
                  itemBuilder: (BuildContext ctx, int index) {
                    var item = widget.data[index];
                    return GestureDetector(
                      behavior: HitTestBehavior.opaque,
                      onTap: ClickUtils.debounce(() {
                        // String cachePhoneArea = appContext.storage.getString('login_area') ?? '';
                        appContext.storage
                            .setString('login_area', item.areaCode);
                        widget.onClick(widget.data[index]);
                        Navigator.of(context).pop();
                      }),
                      child: Container(
                        height: item.firstName.isNotEmpty ? 100 : 47,
                        width: double.infinity,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            if (item.firstName.isNotEmpty)
                              titleWidget(item.firstName),
                            Padding(
                              padding: EdgeInsets.symmetric(horizontal: 15),
                              child: Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Container(
                                    constraints: BoxConstraints(
                                        maxWidth: screenSize.width - 130),
                                    child: Text(
                                      item.name,
                                      softWrap: true,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                        fontSize: 16,
                                        fontWeight: FontWeight.w400,
                                        color: Colors.black,
                                      ),
                                    ),
                                  ),
                                  Spacer(),
                                  Text(
                                    '+${item.areaCode}',
                                    style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w400,
                                      color: ThemeColor.colorBlack60,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                  separatorBuilder: (BuildContext context, int index) {
                    return Divider(
                      height: 1,
                      indent: 15,
                      endIndent: 15,
                    );
                  },
                  itemCount: widget.data.length))
        ],
      ),
    );
  }
}

class AreaCodeData {
  late String name;
  late String areaCode;
  late String firstName;
  late String code;
  late String pinyinName;
  AreaCodeData(Map<String, dynamic> json) {
    name = "${json["name"]}";
    areaCode = "${json["area_code"]}";
    code = "${json["code"]}";
    firstName = '';
    pinyinName = PinyinHelper.getPinyinE(name,
        separator: " ", defPinyin: "#", format: PinyinFormat.WITHOUT_TONE);
  }

  Map<String, dynamic> get json {
    return Map<String, dynamic>()
      ..["name"] = name
      ..["area_code"] = areaCode
      ..["code"] = code;
  }
}
